<template>
  <div id="searchPsg" class="weui-mask" v-show="show" style="z-index: 3000">
    <div class="weui-search-bar weui-search-bar_focusing" id="search_bar">
      <a
        href="javascript:"
        class="weui-search-bar__cancel-btn text-danger ms-1"
        id="search_cancel"
        @click="cancel()"
        >取消</a
      >
      <form class="weui-search-bar__form">
        <div class="weui-search-bar__box">
          <i class="weui-icon-search"></i>
          <input
            type="search"
            class="weui-search-bar__input"
            v-model="searchWord"
            ref="s"
          />
          <a href="javascript:" class="weui-icon-clear" id="search_clear"></a>
        </div>
        <label
          for="search_input"
          class="weui-search-bar__label"
          id="search_text"
          @click.stop="searchPsg()"
        >
          <i class="weui-icon-search"></i>
          <span>搜索</span>
        </label>
      </form>
      <a
        href="javascript:void(0)"
        class="weui-search-bar__cancel-btn"
        id="search_cancel"
        @click="searchPsg()"
        >查找</a
      >
    </div>
    <div class="weui-cells weui-cells_access container mt-0" id="search_show">
      <div class="row">
        <div class="card col-12 px-0">
          <template v-if="psgs.length > 0">
            <div
              class="card-block pb-0 border-bottom-1"
              v-for="(psg, index) in psgs"
            >
              姓名:
              <strong>{{ psg.nameCn }}</strong>
              <br />
              <template v-if="psg.idNo">
                身份证：{{ psg.idNo }}
                <br />
              </template>
              <template v-if="psg.passportNo"
                >护照：{{ psg.passportNo }}</template
              >
              <span class="float-end mb-2">
                <button
                  type="button"
                  class="btn btn-success btn-sm"
                  @click.stop="selectThisPsg(index)"
                >
                  √
                </button>
              </span>
            </div>
          </template>
          <template v-else-if="searchCount > 0">
            <div class="card-block pb-0 border-bottom-1 text-center">
              <span class="text-danger">未找到符合的常用乘机人</span>
            </div>
          </template>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import $ from "jquery";
import { searchPassengers } from "@/api/user.js";

export default {
  props: {
    show: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      searchWord: "",
      psgs: [],
      name: "",
      idno: null,
      passport: null,
      idType: 0,
      searchCount: 0,
    };
  },
  watch: {
    show: function (newVal, oldVal) {
      if (newVal) this.searchCount = 0;
      // console.log('new: %s, old: %s', newVal, oldVal)
    },
  },
  updated: function () {
    // console.log('updated.....')
  },
  methods: {
    ok: function () {
      this.$emit("close", 1);
    },
    cancel: function () {
      this.$emit("close", 0);
    },
    searchPsg: function () {
      this.searchCount++;
      var self = this;
      var searchWord = self.searchWord.toUpperCase();

      const params = { "sc.name": searchWord };
      searchPassengers(params, (v) => {
        if (v !== null) {
          this.psgs = v.dataList;
        }
      });
    },
    selectThisPsg: function (index) {
      this.name = this.psgs[index].nameCn;
      for (let idInfo of this.psgs[index].idInfos) {
        if (idInfo.idType === 1) {
          this.idNo = idInfo.idNo;
        } else if (idInfo.idType === 2) {
          this.passport = idInfo.idNo;
        }
      }
      // this.idno = this.psgs[index].idNo;
      // this.passport = this.psgs[index].passportNo;
      this.idType = 0;

      if (this.idno !== null && this.idno.length > 0) {
        this.idType = 1;
      } else if (this.passport !== null && this.passport.length > 0) {
        this.idType = 2;
        this.idno = this.passport;
      }

      this.$emit("close", 1, this.name, this.idType, this.idno);
    },
  },
};
</script>
